{% extends "ft/base.html" %}
{% block title %}天天生鲜-列表页{% endblock %}
{% block css %}

{% endblock %}
{% block content %}
   <div class="container">
    <!--2.搜索框开始-->
    <div class="search col-sm-12">
        <div class="row">
            <!--左边图片和文字-->
            <div class="col-lg-5">
                <img src="/static/ft/img/logo.png" alt="..." class="img-rounded">
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;所有商品</span>
            </div>
            <!--右边表单-->
            <div class="col-lg-6 col-lg-offset-1 search_bar">
                <form action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品">
                        <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit">搜索</button>
                </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div>
        <div class="col-xs-12 col-sm-2">
            <ul class="list-group">
                <li class="list-group-item active">全部商品分类</li>
            </ul>

        </div>
        <div class="col-xs-12 col-sm-10">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">首页</a></li>
                <li role="presentation"><a href="#">手机生鲜</a></li>
                <li role="presentation"><a href="#">抽奖</a></li>
            </ul>
        </div>
    </div>
    <div>
        <p class="col-xs-12">全部分类 > 新鲜水果</p>
    </div>
    <div>
        <div class="col-xs-12 col-sm-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title text-center newheight">新品推荐</h3>
                </div>
                <div class="panel-body" id="divs_new">
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-10">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <ul class="nav nav-pills">
                        <li><a href="">默认</a></li>
                        <li><a href="">价格</a></li>
                        <li><a href="">人气</a></li>
                    </ul>
                </div>
                <div class="panel-body" id="divs">
                    <!--
                    <div class="col-xs-12 col-sm-3">
                        <a href="detail.html" class="thumbnail">
                            <img src="/static/ft/img/goods/goods001.jpg" class="img-responsive">

                        </a>
                        <p class="text-center">进口柠檬</p>

                        <p class="text-center myps"><span>￥3.90</span><span>3.90/500g</span><span><img
                                <img src="/static/ft/img/carts.png"/></span></p>
                    </div>
                    -->
                </div>
            </div>
            <div class="col-xs-12 col-sm-8 col-sm-offset-4">
                <ul class="pagination col-xs-12 col-sm-8 col-sm-offset-2">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
    <!--底部-->
    <hr>
    <div class="container">
        <div class="text-center">
            <p>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </p>
            <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
            <p>电话：010-****888 京ICP备*******8号</p>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script>
        $(function () {
            $.ajax({
                "method":"get",//请求方式，默认是get
                "url":"/ft/api/goods/",//路由
                "data":{//参数
                    "goodstype_id":1
                },
                "success":function(data){//请求成功的回调函数,可以传入一个参数，表示响应的内容，如果Content-Type: application/json data默认就是json类型
                    //console.log(data)
                    //console.log(typeof data)
                    var divs = ""
                    for(var i in data){
                        var goods = data[i]
                        var div = '<div class="col-xs-12 col-sm-3"><a href="detail.html" class="thumbnail"><img src="/static/bg/img/'+goods.picture+'" class="img-responsive"></a><p class="text-center">'+goods.name+'</p><p class="text-center myps"><span>￥'+goods.price+'</span><span>'+goods.price+'/'+goods.unite+'</span><span><img<img src="/static/ft/img/carts.png"/></span></p></div>'
                        divs+=div
                    }
                    $("#divs").html(divs)
                }
            })
        })
        $(function () {
            $.ajax({
                "method":"get",//请求方式，默认是get
                "url":"/ft/api/goods/new/",//路由
                "data":{//参数
                    "goodstype_id":1
                },
                "success":function(data){//请求成功的回调函数,可以传入一个参数，表示响应的内容，如果Content-Type: application/json data默认就是json类型
                    var divs = ""
                    for(var i in data){
                        var goods = data[i]
                        var div = '<div class="col-xs-12 col-sm-12"><a href="detail.html" class="thumbnail"><img src="/static/bg/img/'+goods.picture+'" class="img-responsive"><p class="text-center">'+goods.name+'</p><p class="text-center">￥'+goods.price+'</p></a></div>'
                        divs+=div
                    }
                    $("#divs_new").html(divs)
                }
            })
        })
    </script>
{% endblock %}